import { useState, memo, useMemo, useCallback } from 'react';
import ExpensiveCpn from './ExpensiveCpn'

// number 的每次改动，都会造成子组件 ExpensiveCpn 的重新渲染
// export default function Demo01() {
//   const [number, setNumber] = useState(0)

//   return (
//     <div>
//       <input type="button" value={number} onClick={(e) => setNumber(number + 1)} />
//       <p>number is {number}</p>
//       <ExpensiveCpn />
//     </div>
//   )
// }

function _Child(props: any) {
  console.log('我不想重新渲染')

  // props.p()
  
  return (
    <div>我不想重新渲染</div>
  )
}

const Child = memo(_Child)

export default function Demo02() {
  const [count, setCount] = useState(0)

  // const _child = useMemo(() => {
  //   return <Child />
  // }, [])

  const p = useCallback(() => {}, [])


  return (
    <div className="wrapper">
      <div onClick={() => setCount(count + 1)}>{count}</div>
      <Child cb={p} />
    </div>
  )
}

// {{}}
// useCallback